<template>
	<view class="container">

		<view class="form">
			<u-form labelPosition="left" :model="order" ref="uForm">
				<!-- 售后类型 -->
				<u-form-item label="申请类型：" labelWidth="80" borderBottom @click="showType = true; hideKeyboard()">
					<u-input v-model="order.backtype_text" disabled disabledColor="#ffffff" placeholder="请选择售后类型"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<!-- 售后原因 -->
				<u-form-item label="申请原因：" labelWidth="80" prop="order.backreson" borderBottom
					@click="showType = true; hideKeyboard()">
					<u-input v-model="order.backreson" disabled disabledColor="#ffffff" placeholder="请选择售后类型"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="退货数量：" labelWidth="80" borderBottom="false">

					<view class="box">
						<view>(本次可退1件)</view>
						<view> <u-number-box v-model="order.num" @change="NumChange"></u-number-box>
						</view>
					</view>
				</u-form-item>
				<view class="row">
					<view class="title">
						申请金额:
					</view>
					<view class="price">
						<view class="price_value">
							￥100
						</view>
						<view class="price_update">
							<u-input placeholder="修改金额" border="bottom" clearable></u-input>
						</view>
					</view>
				</view>

				<view style="width: 100%;height: 6px;background: #eeeeee;margin-top: 10px;"></view>

				<view class="baozhang">
					<view>
						<view class="tag">
							<u-tag text="运费保障：" type="success"></u-tag>
						</view>
						<view class="tip">
							请选择售后类型请选择售后类型请选择售后类型请选择售后类型请选择售后类型请选择售后类型请选择售后类型请选择售后类型请选择售后类型
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 6px;background: #eeeeee;margin-top: 10px;"></view>

				<u-form-item label="简介" >
						<u-textarea placeholder="申请说明" :autoHeight="true" v-model="order.content" border="bottom"  count></u-textarea>
				</u-form-item>
				<u-form-item label="上传图片:" prop="intro" borderBottom ref="item3">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="6"></u-upload>
				</u-form-item>
				<u-form-item
					label="联系电话"
				
					borderBottom
			>
				<u-input
						v-model="order.mobile"
						border="none"
						placeholder="请填写联系电话"
				></u-input>
			</u-form-item>
			<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
			</u-form>
			<u-action-sheet :show="showType" :actions="actions" title="请选择售后类型" @close="showType = false"
				@select="sexSelect">
			</u-action-sheet>
			<u-action-sheet :show="showReson" :actions="resonlist" title="请选择售后类型" @close="showReson = false"
				@select="ResonSelect">
			</u-action-sheet>
		</view>


		<!-- 提醒组件 -->
		<u-toast ref="notice" />
	</view>

</template>

<script>
export default {
	data() {
		return {
			showType: false,
			showReson: false,
			fileList1:[],
			order: {
				order: {
					name: 'uView UI',
					backtype_text: '',
					num: 1
				},
			},
			actions: [
				{
					name: '仅退款',
				},
				{
					name: '退货退款',
				},
			],
			resonlist: [
				{
					name: '不想要了',
				},
				{
					name: '计划有变',
				},
				{
					name: '七天无理由',
				},
				{
					name: '发错货',
				},
			],
			radio: '',
			switchVal: false
		};
	},
	methods: {
		deletePic()
		{

		},
		afterRead()
		{

		},
		NumChange(e) {
			console.log(e)
		},
		sexSelect(e) {
			this.order.order.sex = e.name
			this.$refs.uForm.validateField('order.sex')
		},
		ResonSelect(e) {
			this.order.order.sex = e.name
			this.$refs.uForm.validateField('order.sex')
		},

	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
};

</script>

<style lang="scss">
page {
	background-color: #f8fafe;
}

.form {
	margin: 0 50rpx;
	box-sizing: border-box;

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.row {
		margin-top: 10px;

		.title {
			font-size: 14px;
			color: #1d1c1c;
		}

		.price {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;

			.price_value {
				font-size: 25px;
				color: #111111;
				font-weight: bold;

			}

			.price_update {
				width: 100px;
			}
		}
	}

	.baozhang {
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;

		/* 垂直居中对齐 */
		.tag {
			/* 设置 .tag 的宽度和高度 */
			width: 88px;
			/* 假设 u-tag 高度为 30px */
			margin: 10px 0px;
			/* 右侧间距 */
		}

		.tip {

			width: 100%;
			font-size: 13px;
			word-wrap: break-word;
			/* 在单词内部换行 */
			overflow-wrap: break-word;
			/* 同上 */
			color: #333333;
			letter-spacing: 2px;
		}
	}






}


</style>